<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.moveDiv {
			font-size: 36px;
			color: #0000ff;


			position: relative;
			/* 相对布局 */
			left: 0px;
			top: 0px;

		}
	</style>

	<script type="text/javascript">
		var t; // 保存正在移动的对象
		var curLeft; // 记录当前对象偏移位置 距离左边
		var curTop; // 记录当前对象偏移位置 距离顶部
		var x; // 记录鼠标按下的位置x
		var y; // 记录鼠标按下的位置y

		function down(e) {
			console.log(e);
			console.log(e.clientX + "," + e.clientY);

			if (e.target.className == "moveDiv") {
				// 记录被移动的对象
				t = e.target;
				// 记录当前对象偏移位置
				curLeft = t.offsetLeft;
				curTop = t.offsetTop;
				// 记录鼠标位置
				x = e.clientX;
				y = e.clientY;
				document.onmousemove = move;
				// 鼠标抬起
				document.onmouseup = function() {
					// 不要再执行移动
					document.onmousemove = null;
				}
			}
		}
		// 移动的时候处理
		function move(e) {
			t.style.left = curLeft + (e.clientX - x) + "px";
			t.style.top = curTop + (e.clientY - y) + "px";
			return false;
		}

		document.onmousedown = down;
	</script>
	<body>
		<div class="moveDiv">
			Hello world
		</div>
	</body>
</html>
